package com.example.homework.ui.screens

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
import com.bumptech.glide.integration.compose.GlideImage
import com.example.homework.viewmodels.CharacterViewModel
import kotlinx.serialization.Serializable

@Serializable
data class CharacterInfoScreen(val id: Int) : Screens() {
    @OptIn(ExperimentalGlideComposeApi::class)
    @Composable
    fun Body(viewModel: CharacterViewModel = CharacterViewModel()) {
        val charact by viewModel.character.collectAsState()
        val episodes by viewModel.episodes.collectAsState(emptyList())

        LaunchedEffect(id) {
            viewModel.loadCharacter(id)
        }

        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {
            item {
                charact?.let { character ->
                    GlideImage(
                        model = character.image,
                        contentDescription = character.name,
                        contentScale = ContentScale.FillWidth,
                    )

                    Spacer(modifier = Modifier.height(16.dp))
                    Text(text = character.name, fontSize = 24.sp, fontWeight = FontWeight.Bold)
                    Spacer(modifier = Modifier.height(8.dp))

                    Card(
                        shape = RoundedCornerShape(8.dp),
                        elevation = CardDefaults.cardElevation(4.dp),
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Column(modifier = Modifier.padding(16.dp)) {
                            DetailRow(
                                label = "Live status:",
                                value = character.status,
                                color = Color.Green
                            )
                            DetailRow(label = "Species and gender:", value = character.gender)
                            DetailRow(label = "Last known location:", value = character.location.name)
                            DetailRow(
                                label = "First seen in:",
                                value = character.episode.firstOrNull() ?: "Unknown"
                            )
                        }
                    }

                    Spacer(modifier = Modifier.height(16.dp))

                    Text(text = "Episodes:", fontSize = 18.sp, fontWeight = FontWeight.Bold)
                    Spacer(modifier = Modifier.height(8.dp))
                } ?: Text(text = "Loading...", fontSize = 20.sp, fontWeight = FontWeight.Bold)
            }

            items(episodes) { episode ->
                Card(
                    shape = RoundedCornerShape(8.dp),
                    elevation = CardDefaults.cardElevation(4.dp),
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 4.dp)
                ) {
                    Row(
                        modifier = Modifier.padding(16.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                            text = episode.name,
                            fontSize = 16.sp,
                            fontWeight = FontWeight.Medium
                        )
                        Spacer(modifier = Modifier.weight(1f))
                        Text(
                            text = episode.episode,
                            fontSize = 14.sp,
                            color = Color.Gray
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun DetailRow(label: String, value: String, color: Color = Color.White) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp)
    ) {
        Text(text = label, fontWeight = FontWeight.Medium)
        Spacer(modifier = Modifier.weight(1f))
        Text(text = value, color = color)
    }
}